<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/font-awesome.css" />
    <script src="js/vue.js"></script>
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #eeeeee;
        }
        .navbar-text a  {
            color: #ffffff;
        }
        .login-text {
            margin-right: 50px;
        }
        .logo {
            color: #E94F4C;
            font-size: 35px;
            display: inline-block;
        }
        .search-box {
            height: 48px;
        }
        .input-group-addon {
            background-color:#E94F4C;
            border: none;
            color: #ffffff;
        }
        .control-icon {
            position: absolute;
            top: 50%;
        }
        .mgt38 {
            margin-top: 30px;
        }
        .thumbnail a img {
            height: 200px;
            width: 200px;
        }
        .thumbnail .description {
            height: 40px;
            overflow: hidden;
        }
        a:hover {
            text-decoration: none;
        }
        h3, p {
            text-align: center;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default navbar-inverse navbar-static-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="前端首页.html" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i> 寻欢易购</a>
            </div>
            <p class="navbar-text navbar-right login-text">
                <a id="loginText" href="登录页面.html">登录</a>
            </p>
            <p class="navbar-text navbar-right">
                <a href="仿京东注册.html">注册</a>
            </p>
        </div>
    </nav>
    <div class="container">
        <div class="row">
            <div class="col-xs-1 search-box">
                <a href="#" class="logo">
                    <i class="fa fa-sign-language"></i>
                </a>
            </div>
            <div class="col-xs-9 search-box">
                <div class="input-group search-box">
                    <input class="form-control search-box">
                    <span class="input-group-addon">
                        <i class="fa fa-search"></i>
                    </span>
                </div>
            </div>
            <div class="col-xs-2 search-box">
                <a href="购物车页面.html" class="btn btn-danger btn-block search-box">
                    <i class="fa fa-cart-arrow-down" style="font-size: 20px;"></i>&nbsp;&nbsp;购物车
                    <!-- 购物车数据的数量 -->
                    <span id="shoppingCartNum" class="badge">0</span>
                </a>
            </div>
        </div>
        <div class="row">
            <div id="carousel-example" class="carousel slide mgt38" data-ride="carousel">
                <!-- 小圆点 -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example" data-slide-to="1"></li>
                    <li data-target="#carousel-example" data-slide-to="2"></li>
                    <li data-target="#carousel-example" data-slide-to="4"></li>
                </ol>

                <!-- 放置图片 -->
                <div class="carousel-inner">

                    <!-- 展示每张图片以及文字 -->
                    <div class="item active">
                        <img src="images/banner1.webp">
                    </div>
                    <div class="item">
                        <img src="images/banner1.webp">
                    </div>
                    <div class="item">
                        <img src="images/banner1.webp">
                    </div>
                    <div class="item">
                        <img src="images/banner1.webp">
                    </div>
                </div>

                <!-- 左边的箭头 -->
                <a class="left carousel-control" href="#carousel-example" data-slide="prev">
                    <span class="fa fa-chevron-left control-icon"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <!-- 右边的箭头 -->
                <a class="right carousel-control" href="#carousel-example" data-slide="next">
                    <span class="fa fa-chevron-right control-icon"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="row mgt38" id="goodsListInfo">
            <div class="col-xs-3">
                <div class="thumbnail">
                    <a href="javascript: void(0);">
                        <img src="images/apple.jpg">
                        <div class="caption">
                            <p class="description">
                                Apple iPhone XS Max (A2104) 64GB 金色 移动联通电信4G手机 双卡双待
                            </p>
                            <p>
                                价格：￥5099
                            </p>
                            <p>
                                <button onclick="addToShoppingCart(this)" class="btn btn-danger">加入购物车</button>
                            </p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="thumbnail">
                    <a href="javascript: void(0);">
                        <img src="images/apple.jpg">
                        <div class="caption">
                            <p class="description">
                                Apple iPhone XS Max (A2104) 64GB 金色 移动联通电信4G手机 双卡双待
                            </p>
                            <p>
                                价格：￥5099
                            </p>
                            <p>
                                <button onclick="addToShoppingCart(this)" class="btn btn-danger">加入购物车</button>
                            </p>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-xs-3">
                <div class="thumbnail">
                    <a href="javascript: void(0);">
                        <img src="images/apple.jpg">
                        <div class="caption">
                            <p class="description">
                                Apple iPhone XS Max (A2104) 64GB 金色 移动联通电信4G手机 双卡双待
                            </p>
                            <p>
                                价格：￥5099
                            </p>
                            <p>
                                <button onclick="addToShoppingCart(this)" class="btn btn-danger">加入购物车</button>
                            </p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#goodsListInfo',
        data: {
            goodList: []
        }
    })

    // 显示错误提示信息
    function showErrorBox(msgText) {
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false  // 不要音频
        })
    }
</script>
</html>